<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>easy-select-file</title>
    </head>
    <body>
        <div>
            <h1>文件选择库</h1>
            <p>
                <button id="select-signle-file">点击选择单个文件easySelectFile.selectFile(cb)</button>
                <button id="select-signle-image-file">点击选择单个图片easySelectFile.selectFile({accept: "image/*", cb})</button>
                <button id="select-signle-10k-100k-image-file">点击选择单个(10k-100k)图片easySelectFile.selectFile({accept: "image/*", minSize: "10k", maxSize: "100k"}}, cb)</button>
            </p>
            <p>
                <button id="select-signle-files">点击选择多个文件easySelectFile.selectFiles(cb)</button>
                <button id="select-signle-image-files">点击选择多个图片easySelectFile.selectFiles({accept: "image/*", cb})</button>
                <button id="select-signle-10k-100k-image-files">点击选择多个(10k-100k)图片easySelectFile.selectFiles({accept: "image/*", minSize: "10k", maxSize: "100k"}}, cb)</button>
            </p>
        </div>
    </body>
    <script src="../dist/easy-select-file.browser.js"></script>
    <script>
        function result(err, data){
            if(err){
                if(easySelectFile.isCancel(err)){
                    alert("cancel")
                } else if(err instanceof easySelectFile.errors.FileSizeOrTypeError) {
                    alert("size or type error")
                }
            } else {
                if(Array.isArray(data)){
                    alert("选中了" + data.length + "一个文件")
                } else {
                    alert("选中了1个文件")
                }
            }
        }

        document.getElementById("select-signle-file").addEventListener("click", function(){
            easySelectFile.selectFile(result)
        })
        document.getElementById("select-signle-image-file").addEventListener("click", function(){
            easySelectFile.selectFile({ accept: "image/*"}, result)
        })
        document.getElementById("select-signle-10k-100k-image-file").addEventListener("click", function(){
            easySelectFile.selectFile({ accept: "image/*", minSize: "10k", maxSize: "100k"}, result)
        })

        document.getElementById("select-signle-files").addEventListener("click", function(){
            easySelectFile.selectFiles(result)
        })
        document.getElementById("select-signle-image-files").addEventListener("click", function(){
            easySelectFile.selectFiles({ accept: "image/*"}, result)
        })
        document.getElementById("select-signle-10k-100k-image-files").addEventListener("click", function(){
            easySelectFile.selectFiles({ accept: "image/*", minSize: "10k", maxSize: "100k"}, result)
        })
    </script>
</html>